<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>写字板</title>
  <link rel="stylesheet" href="../../bootstrap/bootstrap.min.css">
  <style>
    .btn-group button {
      border-radius: 0;
    }
  </style>
</head>

<body> 
  <div class="container mt-5">
    <h1 class="mb-4">写字板</h1>
    <div class="btn-group mb-3" role="group" aria-label="Text styles">
      <button type="button" class="btn btn-secondary" onclick="document.execCommand('bold', false, null)"><strong>B</strong></button>
      <button type="button" class="btn btn-secondary" onclick="document.execCommand('italic', false, null)"><em>I</em></button>
      <button type="button" class="btn btn-secondary" onclick="document.execCommand('underline', false, null)"><u>U</u></button>
    </div>
    <form>
      <div class="form-floating" style="font-size: small;">
        <div contenteditable="true" class="form-control" placeholder="在此处输入您的文本" id="textInput" style="height: 150px"></div>
        <label for="textInput">文本</label>
      </div>
    </form>
    <div style="margin-top: 10px;">
        <button type="button" class="btn btn-primary me-2" onclick="saveText()">保存</button>
        <button type="button" class="btn btn-secondary" onclick="clearText()">清除</button>
    </div>
  </div>
  <script>
    // 从本地存储加载保存的文本
    document.getElementById("textInput").innerHTML = localStorage.getItem("savedText") || "";

    function saveText() {
      // 将文本保存到本地存储
      const textInput = document.getElementById("textInput").innerHTML;
      localStorage.setItem("savedText", textInput);
    }

    function clearText() {
      // 清除输入和本地存储中的文本
      document.getElementById("textInput").innerHTML = "";
      localStorage.removeItem("savedText");
    }
  </script>
</body>

</html>
